<template>
  <CDialog
    :title="title"
    :close-on-click-modal="false"
    v-model:visible="dialogVisible"
    :footer="false"
    size="auto"
  >
    <div class="g-mb20">
      <CTable v-bind="tableOptions">
        <vxe-column title="资产类别" min-width="150" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(getLabelFromEnum(AssetsClassOption, scope.row.assetType)) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="变动方向" min-width="100" show-overflow="tooltip">
          <template #default="scope">
            <template v-if="scope.row.transactionType">
              <span v-if="['QUOTA_ALLOCATION', 'BUY_QUOTA'].includes(scope.row.transactionType)">{{
                getLabelFromEnum(TradingDirectionOption, scope.row.transactionType) + '（+）'
              }}</span>
              <span v-else>{{
                getLabelFromEnum(TradingDirectionOption, scope.row.transactionType) + '（-）'
              }}</span>
            </template>
            <template v-else>
              <span>-</span>
            </template>
          </template>
        </vxe-column>
        <vxe-column title="变动量（t）" min-width="90" align="right" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.transactionNumber) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="单价（元）" min-width="90" align="right" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.transactionPrice) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="变动日期" min-width="100" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.transactionDate) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="年份" min-width="100" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.transactionYear) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="手续费（元）" min-width="90" align="right" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.transactionCost) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="总金额（元）" min-width="90" align="right" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.transactionTotalAmount) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="备注" min-width="180" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.remark) }}</span>
          </template>
        </vxe-column>
      </CTable>
    </div>
    <div id="factor-simple-page" class="g-mb20 g-flex-end-center"></div>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'AccountChangeRecord'
};
</script>
<script lang="ts" setup name="AccountChangeRecord">
import { defineProps, withDefaults, defineEmits, computed } from 'vue';
import { CDialog } from '@/components/CDialog';
import { CTable, CTableProps } from '@/components/CTable';
import type { GetAccountChangeRecordParams } from '@/apis/taa/asset/model/accountModel';
import type { BasicPagingListParams } from '@/apis/basicModel';
import { getAccountChangeRecord } from '@/apis/taa/asset/account';
import { TradingDirectionOption, AssetsClassOption } from '@/constants/enum';
import { removeUndefinedParams } from '@/utils/index';
import { empty } from '@/utils/index';

interface CSetEmissionFactorDialogProps {
  visible: boolean;
  assetNo: string;
  assetDepartment: string;
}
const props = withDefaults(defineProps<CSetEmissionFactorDialogProps>(), {
  visible: false,
  assetNo: '',
  assetDepartment: ''
});
const emits = defineEmits(['update:visible', 'refresh']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emits('update:visible', val);
  }
});

const title = computed(() => {
  return `账户变动记录_${props.assetDepartment}`;
});

// 表格数据获取
function loadData(parameter: BasicPagingListParams) {
  const params = Object.assign(handleParams(), parameter);
  return getAccountChangeRecord(params);
}

// 处理参数
const handleParams = (): GetAccountChangeRecordParams => {
  // 参数
  let params: GetAccountChangeRecordParams = {
    assetNo: props.assetNo
  };
  params = removeUndefinedParams(params);
  return params;
};

function getLabelFromEnum(enumArray: any, value: any) {
  const foundItem = enumArray.find((item: any) => item.value === value);
  return foundItem ? foundItem.label : null;
}

const tableOptions: CTableProps = {
  pagination: {
    teleport: '#factor-simple-page',
    layout: 'total, prev, slot, next'
  },
  loadData
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.vxe-table--tooltip-wrapper {
  z-index: 4000 !important;
  min-width: 100px;
}
</style>
